<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>订单物流查询</title>
  <link rel="stylesheet" href="https://unpkg.com/iview/dist/styles/iview.css">
  <link rel="stylesheet" href="src/css/vue-style.css">
  <style>
    [v-cloak]{
    display: none;
  }
  </style>
</head>

<body>
  <div id="app" v-cloak>
    <div class="vue-wrapper" ref="contentH">
      <div class="search-wrapper" v-show="showSearch">
        <Row :gutter="16">
          <i-col span="7">
            <div class="search-input common-input">
              <span class="prepend">目的地</span>
              <div class="search-input-flex common-input-flex">
                <i-input v-model="search.destination" />
              </div>
            </div>
          </i-col>
          <i-col span="5">
            <div class="search-input common-input">
              <span class="prepend">发货方</span>
              <div class="search-input-flex common-input-flex">
                <i-input v-model="search.shipper" />
              </div>
            </div>
          </i-col>
          <i-col span="5">
            <div class="search-input common-input">
              <span class="prepend">收货方</span>
              <div class="search-input-flex common-input-flex">
                <i-input v-model="search.receiver" />
              </div>
            </div>
          </i-col>
          <i-col span="5">
            <div class="search-input common-input">
              <span class="prepend">制单人</span>
              <div class="search-input-flex common-input-flex">
                <i-input v-model="search.billingName" />
              </div>
            </div>
          </i-col>
        </Row>
        <div class="hide-search" v-if="hideSearch">
          <Row :gutter="16">
            <i-col span="5">
              <div class="search-input common-input">
                <span class="prepend">业务订单号</span>
                <div class="search-input-flex common-input-flex">
                  <i-input v-model="search.businessNumber" />
                </div>
              </div>
            </i-col>
            <i-col span="7">
              <div class="search-data common-input">
                <span class="prepend">订单日期</span>
                <div class="common-input-flex">
                  <date-picker type="date" v-model="search.startDate"></date-picker>
                </div>
                <i class="input-line">—</i>
                <div class="common-input-flex">
                  <date-picker type="date" v-model="search.endDate"></date-picker>
                </div>
              </div>
            </i-col>
            <i-col span="5">
              <div class="search-select common-input">
                <span class="prepend">订单状态</span>
                <div class="common-input-flex">
                  <i-select v-model="search.status" placeholder="全部">
                    <i-option v-for="item in orderStatus" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                  </i-select>
                </div>
              </div>
            </i-col>
            <i-col span="2" class="fr tar">
              <a href="" class="ivu-icon ivu-icon-ios-search search-btn2">查询</a>
            </i-col>
          </Row>
        </div>
      </div>
      <div class="page-content">
        <Tabs value="name1">
          <tab-pane label="处理中" name="name1">
            <h2 class="table-total">您当前共有<span>{{tableDataRecords}}</span>项订单信息</h2>
            <i-table :columns="tableColumn" :data="tableData" ref="selection" stripe></i-table>
            <div style="margin: 10px;overflow: hidden">
              <div class="tac">
                <Page :total="tableDataRecords" :current="1" @on-change="changePage"></Page>
              </div>
            </div>
          </tab-pane>
          <tab-pane label="签收完成" name="name2">
            <h2 class="table-total">您当前共有<span>{{tableDataRecords}}</span>项订单信息</h2>
            <i-table :columns="tableColumn2" :data="tableData2" ref="selection" stripe></i-table>
            <div style="margin: 10px;overflow: hidden">
              <div class="tac">
                <Page :total="tableDataRecords2" :current="1" @on-change="changePage"></Page>
              </div>
            </div>
          </tab-pane>
        </Tabs>
      </div>
    </div>
    <!-- 异常录入 -->
    <Modal v-model="abnormalModal" title="订单异常跟踪" width="800">
      <div>
        <table class="abnormal-table">
          <thead>
            <tr>
              <th style="width: 150px;">异常反馈时间</th>
              <th style="width: 100px;">反馈人</th>
              <th style="width: 150px;">责任归属</th>
              <th style="width: 150px;">异常描述</th>
              <th style="width: 250px;">异常备注</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in abnormalData">
              <td>
                <date-picker type="date" v-model="item.time"></date-picker>
              </td>
              <td>
                <i-input v-model="item.people" />
              </td>
              <td>
                <i-select v-model="item.selectResponsibility">
                  <i-option v-for="list in responsibility" :value="list.value" :key="list.value">{{ list.label }}</i-option>
                </i-select>
              </td>
              <td>
                <i-select v-model="item.selectDescription">
                  <i-option v-for="list in item.description" :value="list.value" :key="list.value">{{ list.label }}</i-option>
                </i-select>
              </td>
              <td>
                <i-input v-model="item.remark" />
              </td>
            </tr>
          </tbody>
        </table>
        <h2>异常解决信息</h2>
        <table class="abnormal-table">
          <thead>
            <tr>
              <th style="width: 150px;">异常解决时间</th>
              <th style="width: 100px;">解决人</th>
              <th style="width: 150px;">异常解决方法</th>
              <th style="width: 250px;">备注</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in solveData">
              <td>
                <date-picker type="date" v-model="item.time"></date-picker>
              </td>
              <td>
                <i-input v-model="item.people" />
              </td>
              <td>
                <i-select v-model="item.selectDescription">
                  <i-option v-for="list in description" :value="list.value" :key="list.value">{{ list.label }}</i-option>
                </i-select>
              </td>
              <td>
                <i-input v-model="item.remark" />
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div slot="footer">
        <Button type="error" @click="close">关闭</Button>
        <Button type="info" @click="save">保存</Button>
      </div>
    </Modal>
    <!-- 附加费录入 -->
    <Modal v-model="additionalFeesModal" title="新增附加费用" width="800">
      <div>
        <div class="full-btn tar mb-10">
          <button class="ivu-icon ivu-icon-md-add" @click="addTr()">添加</button>
        </div>
        <table class="table-vue">
          <thead>
            <tr>
              <th>序号</th>
              <th style="width: 150px;">附加费类型</th>
              <th>金额</th>
              <th style="width: 350px;">费用备注</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in additionalFees">
              <td>{{ index+1 }}</td>
              <td>
                <i-select v-model="item.getQuotepriceType">
                  <i-option value="20181112143612950001" key="20181112143612950001">提货上楼费</i-option>
                </i-select>
              </td>
              <td>
                <i-input v-model="item.QuotepriceMoney" class="tac" />
              </td>
              <td>
                <i-input v-model="item.QuotepriceMemo" class="tac" />
              </td>
              <td>
                <button class="del" @click="removeTr(index)">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div slot="footer">
        <button-group class="btn-group">
          <i-button class="close" @click="closeAdditionalFeesModal">关闭</i-button>
          <i-button class="save" @click="saveAdditionalFeesModal">保存</i-button>
        </button-group>
      </div>
    </Modal>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/iview/dist/iview.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    var appLayout = new Vue({
      el: '#app',
      data: {
        showSearch: false,
        hideSearch: true,
        search: {
          destination: '',
          shipper: '',
          receiver: '',
          billingName: '',
          businessNumber: '',
          startDate: '',
          endDate: '',
          status: "",
        },
        orderStatus: [{
          value: '',
          label: '全部'
        }, {
          value: '等待受理',
          label: '等待受理'
        }, {
          value: '等待调度',
          label: '等待调度'
        }, {
          value: '等待配送',
          label: '等待配送'
        }, {
          value: '部分入库',
          label: '部分入库'
        }, {
          value: '全部入库',
          label: '全部入库'
        }, {
          value: '部分出库',
          label: '部分出库'
        }, {
          value: '全部出库',
          label: '全部出库'
        }, {
          value: '配送中',
          label: '配送中'
        }, {
          value: '签收完成',
          label: '签收完成'
        }],
        tableColumn: [{
          type: 'index',
          title: '序号',
          width: 40,
          align: 'center',
          fixed: 'left'
        }, {
          title: '收货方',
          key: 'shipper',
          width: 250,
          align: 'center',
          fixed: 'left'
        }, {
          title: '制单日期',
          key: 'date',
          width: 80,
          align: 'center',
          fixed: 'left'
        }, {
          title: '业务单号',
          width: 100,
          align: 'center',
          fixed: 'left',
          render: (h, params) => {
            return h('a', {
              attrs: {
                href: "orderDetail.html"
              }
            }, params.row.businessNumber)
          }
        }, {
          title: '订单状态',
          key: 'orderStatus',
          width: 80,
          align: 'center',
          fixed: 'left',
          render: (h, params) => {
            return h('div', [
              h('span',
                params.row.orderStatus
              )
            ]);
          }
        }, {
          title: '到货预警',
          key: 'arrivalWarning',
          width: 100,
          align: 'center'
        }, {
          title: '商品类型',
          key: 'productType',
          width: 130,
          align: 'center'
        }, {
          title: '件数(件)',
          key: 'pieces',
          width: 70,
          align: 'right'
        }, {
          title: '重量(Kg)',
          key: 'weight',
          width: 70,
          align: 'right'
        }, {
          title: '体积(m³)',
          key: 'volume',
          width: 70,
          align: 'right'
        }, {
          title: '收货人',
          key: 'receiver',
          width: 80,
          align: 'center'
        }, {
          title: '联系电话',
          key: 'tel',
          width: 110,
          align: 'center'
        }, {
          title: '目的地',
          key: 'address',
          width: 110,
          align: 'center'
        }, {
          title: '详细地址',
          key: 'detailAddress',
          width: 200,
          align: 'center'
        }, {
          title: '代收款(元)',
          key: 'collectionPayment',
          width: 70,
          align: 'right'
        }, {
          title: '配送方式',
          key: 'deliveryMethod',
          width: 110,
          align: 'center'
        }, {
          title: '承运商名称',
          key: 'carrierName',
          width: 170,
          align: 'center'
        }, {
          title: '物流单号',
          key: 'shipmentNumber',
          width: 140,
          align: 'center'
        }, {
          title: '承运商运费',
          key: 'carrierFreight',
          width: 100,
          align: 'right'
        }, {
          title: '车牌号',
          key: 'carNumber',
          width: 80,
          align: 'center'
        }, {
          title: '司机姓名',
          key: 'driverName',
          width: 80,
          align: 'center'
        }, {
          title: '司机电话',
          key: 'driverTel',
          width: 100,
          align: 'center'
        }, {
          title: '搬运工',
          key: 'porter',
          width: 60,
          align: 'center'
        }, {
          title: '快递单号',
          key: 'trackingNumber',
          width: 140,
          align: 'center'
        }, {
          title: '制单人',
          key: 'billingName',
          width: 60,
          align: 'center'
        }, {
          title: '操作',
          key: 'action',
          align: 'center',
          width: 160,
          fixed: 'right',
          render: (h, params) => {
            if (params.row.orderStatus == '等待调度' || params.row.orderStatus == '等待受理' || params.row.orderStatus == '等待配送') {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'info',
                    size: 'small'
                  },
                  style: {
                    color: '#bfbfbf'
                  }
                }, '异常录入'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    color: '#bfbfbf'
                  }
                }, '附加费录入')
              ])
            } else {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'info',
                    size: 'small'
                  }
                }, '异常录入'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  }
                }, '附加费录入')
              ])
            }
          },
        }],
        tableData: [],
        tableDataRecords: 0,
        tableColumn2: [{
          type: 'index',
          title: '序号',
          width: 40,
          align: 'center',
          fixed: 'left'
        }, {
          title: '收货方',
          key: 'shipper',
          width: 250,
          align: 'center',
          fixed: 'left'
        }, {
          title: '制单日期',
          key: 'date',
          width: 80,
          align: 'center',
          fixed: 'left'
        }, {
          title: '业务单号',
          width: 100,
          align: 'center',
          fixed: 'left',
          render: (h, params) => {
            return h('a', {
              attrs: {
                href: 'orderDetail.html'
              }
            }, params.row.businessNumber)
          }
        }, {
          title: '订单状态',
          key: 'orderStatus',
          width: 80,
          align: 'center',
          fixed: 'left'
        }, {
          title: '到货预警',
          key: 'arrivalWarning',
          width: 100,
          align: 'center'
        }, {
          title: '商品类型',
          key: 'productType',
          width: 130,
          align: 'center'
        }, {
          title: '件数(件)',
          key: 'pieces',
          width: 70,
          align: 'right'
        }, {
          title: '重量(Kg)',
          key: 'weight',
          width: 70,
          align: 'right'
        }, {
          title: '体积(m³)',
          key: 'volume',
          width: 70,
          align: 'right'
        }, {
          title: '收货人',
          key: 'receiver',
          width: 80,
          align: 'center'
        }, {
          title: '联系电话',
          key: 'tel',
          width: 110,
          align: 'center'
        }, {
          title: '目的地',
          key: 'address',
          width: 110,
          align: 'center'
        }, {
          title: '详细地址',
          key: 'detailAddress',
          width: 200,
          align: 'center'
        }, {
          title: '代收款(元)',
          key: 'collectionPayment',
          width: 70,
          align: 'right'
        }, {
          title: '配送方式',
          key: 'deliveryMethod',
          width: 110,
          align: 'center'
        }, {
          title: '承运商名称',
          key: 'carrierName',
          width: 170,
          align: 'center'
        }, {
          title: '物流单号',
          key: 'shipmentNumber',
          width: 140,
          align: 'center'
        }, {
          title: '承运商运费',
          key: 'carrierFreight',
          width: 100,
          align: 'right'
        }, {
          title: '车牌号',
          key: 'carNumber',
          width: 80,
          align: 'center'
        }, {
          title: '司机姓名',
          key: 'driverName',
          width: 80,
          align: 'center'
        }, {
          title: '司机电话',
          key: 'driverTel',
          width: 100,
          align: 'center'
        }, {
          title: '搬运工',
          key: 'porter',
          width: 60,
          align: 'center'
        }, {
          title: '快递单号',
          key: 'trackingNumber',
          width: 140,
          align: 'center'
        }, {
          title: '制单人',
          key: 'billingName',
          width: 60,
          align: 'center'
        }, {
          title: '操作',
          key: 'action',
          align: 'center',
          width: 160,
          fixed: 'right',
          render: (h, params) => {
            return h('div', [
              h('a', {
                class: 'table-btn',
                attrs: {
                  href: 'list.html'
                  // 链接到相应的详情页
                },
              }, '回单登记')
            ]);
          }
        }],
        tableData2: [],
        tableDataRecords2: 0,
        abnormalModal: false,
        abnormalData: [{
          time: '',
          people: '',
          selectResponsibility: '',
          selectDescription: '',
          remark: ''
        }],
        description: [],
        responsibility: [{
          value: '仓库原因',
          label: '仓库原因'
        }, {
          value: '运输原因',
          label: '运输原因'
        }, {
          value: '货主原因',
          label: '货主原因'
        }, {
          value: '收货方原因',
          label: '收货方原因'
        }],
        solveData: [{
          time: '',
          people: '',
          selectDescription: '',
          description: [],
          remark: ''
        }],
        additionalFeesModal: false,
        additionalFees: []
      },
      mounted() {
        this.getTableData()
        this.getTableData2()
        this.showSearch = true;

        let self = this;
        this.$nextTick(() => {
          self.$refs.contentH.style.height = (self.$refs.contentH.clientHeight + 50) + 'px';
        })
      },
      methods: {
        // 获取表格数据
        getTableData() {
          axios.get('static/order2.json').then(response => {
            this.tableData = response.data.Datas;
            this.tableDataRecords = response.data.TotalRecords;
          })
        },
        changePage() {
          this.tableData = this.getTableData();
        },
        getTableData2() {
          axios.get('static/order2-1.json').then(res => {
            this.tableData2 = res.data.Datas;
            this.tableDataRecords2 = res.data.TotalRecords;
          })
        },
        // 异常录入
        save() {},
        close() {
          this.abnormalModal = false
        },
        // 附加费用录入
        addTr() {
          this.additionalFees.push({
            getQuotepriceType: '',
            QuotepriceType: '',
            QuotepriceMoney: '',
            QuotepriceMemo: ''
          })
        },
        removeTr(index) {
          this.additionalFees.splice(index, 1)
        },
        closeAdditionalFeesModal() {
          this.additionalFeesModal = false
        },
        saveAdditionalFeesModal() {
          this.additionalFeesModal = false
        }
      }
    })
  </script>
</body>

</html>